<template>
	<view class="content">
		<u-sticky>
			<!-- <baseNavbarHome /> -->
			<view v-if="userInfor.user" class="header"
				:style="{ backgroundImage: `${ userInfor.user.backgroundImg ? `url(${userInfor.user.backgroundImg})` : 'linear-gradient(to right, #FE7C67, #634FDF)' }`}">
				<view class="header1"></view>
				<view class="infor">
					<image :src="userInfor.user.userProfileImg ? userInfor.user.userProfileImg : ''" class="img1">
					</image>
					<view class="text">
						<view>{{ userInfor.user.username }}</view>
						<view>
							荔知游ID：{{ userInfor.user.uuid.length < 10 ? userInfor.user.uuid : address2simple(userInfor.user.uuid, 10) }}
						</view>
					</view>
				</view>
				<view class="totalBox">
					<view class="number" @click="goFllowFanList('/pages/my/followList')">
						<view>{{ userInfor.follow }}</view>
						<view>关注</view>
					</view>
					<view class="number" @click="goFllowFanList('/pages/my/fanList')">
						<view>{{ userInfor.fans }}</view>
						<view>粉丝</view>
					</view>
					<view class="number">
						<view>{{ userInfor.planLike + userInfor.planSave }}</view>
						<view>获赞与收藏</view>
					</view>
					<view class="choose" v-if="isShow == false" @click="care">
						<image src="/static/my/add.png"></image>
						关注
					</view>
					<view class="choose1" v-else @click="payClose = true">
						已关注
					</view>
				</view>
				<view class="tabs-box">
					<u-tabs :list="list1" :activeStyle="{
			    color: '#000',
			    fontWeight: '600',
				fontFamily: 'PingFang SC',
				fontSize: '30rpx',
				letterSpacing: '2rpx',
			}" :inactiveStyle="{
			    color: '#000',
			    fontWeight: '600',
			    fontSize: '30rpx',
				fontFamily: 'PingFang SC',
			    letterSpacing: '2rpx',
			}" :scrollable="false" lineWidth="20" lineColor="#E5725F" @click="change">
					</u-tabs>
				</view>
			</view>
		</u-sticky>
		<view class="box">
			<view class="box-item" v-for="item in noteData" :key="item.id">
				<image :src="item.images[0]" mode="aspectFill" class="box-img" @click="goToDetails(item.planUuid)">
				</image>
				<text class="box-text">{{ item.title }}</text>
				<view class="box-bottom">
					<view class="head">
						<image src="/static/image/icon/vector.png" mode="" class="head-img"></image>
						<text class="head-name">{{ item.likes }}</text>
					</view>
					<view class="aixin">
						<image src="/static/image/icon/eye.png" mode="" class="head-img"></image>
						<text class="aixin-text">{{ item.saves }}</text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="noteData.length <= 0" class="emptyBox">
			<view class="empty">
				<image src="/static/my/empty.png"></image>
				<view>什么都没有～</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<u-popup :show="payClose" @close="payClose = false" bgColor="transparent" mode="center" :overlay="false">
			<view class="poput-box fontS28 padding_l_r40">
				<view class="bold color_222222 text-center mar_top60">确认不再关注？</view>
				<view class="flex justify-between align-center mar_top60 mar_bottom30">
					<view @click="payClose = false"
						class="point-out border color-46CA28 flex justify-center align-center ">取消</view>
					<view @click="cancel" class="point-out bg_color_E5725F color_fff flex justify-center align-center">
						确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import baseNavbarHome from '@/components/base-navbar-home.vue'
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue';

	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app';

	const {
		proxy
	} = getCurrentInstance();

	const list1 = ref([{
		name: '笔记'
	}, {
		name: '收藏'
	}])

	const isShow = ref(true)
	const userInfor = ref({});
	const uuid = ref('');
	const noteData = ref([]);
	const payClose = ref(false);
	// 前往对方粉丝/关注列表
	// const goFllowFanList = (url) => {
	// 	uni.navigateTo({
	// 		url: url
	// 	})
	// }
	const foolw = async (id) => {
		if (uni.getStorageSync('token')) {
			const res = await proxy.$api.fool(id)
			isShow.value = res.data
		} else {
			isShow.value = false
		}
	}
	//关注
	const care = async () => {
		if (uni.getStorageSync('token')) {
			const res = await proxy.$api.fool1({
				followingUuid: uuid.value
			})
			if (res.code == "10000") {
				uni.showToast({
					title: "关注成功",
					duration: 1200,
				})
				setTimeout(() => {
					foolw(uuid.value)
				}, 800)
			}
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
	//取消关注
	const cancel = async () => {
		const res = await proxy.$api.fool2({
			followingUuid: uuid.value
		})
		if (res.code == "10000") {
			payClose.value = false;
			foolw(uuid.value)
		}
	}
	const address2simple = (address, cut) => {
		let length = address.length;
		if (!address || length < cut * 2) {
			return "";
		}
		let prefix = address.substring(0, cut);
		let suffix = address.substring(length - cut, length);
		return `${prefix}...${suffix}`;
	}
	onLoad(async (option) => {
		const res = await proxy.$api.getPer(option.id);
		if (res.code === '10000') {
			userInfor.value = res.data;
			uuid.value = res.data.user.uuid;

			uni.setNavigationBarTitle({
				title: userInfor.value.user.username
			})

			foolw(res.data.user.uuid);
			getNote(res.data.user.uuid);
		}
	})
	//笔记
	const getNote = async (id) => {
		const res = await proxy.$api.getPerNote(id)
		noteData.value = res.data
	}
	//收藏
	const getCollect = async (id) => {
		const res = await proxy.$api.getPerColl(id)
		noteData.value = res.data
	}
	const change = (e) => {
		if (e.index === 0) {
			getNote(uuid.value)
		} else if (e.index === 1) {
			getCollect(uuid.value)
		}
	}
	const goToDetails = (id) => {
		// 去详情页面
		uni.navigateTo({
			url: `/pages/index/details?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background-color: #f8f8f8;
	}
	
	.tabs-box {
		width: 100%;
		position: absolute;
		z-index: 99;
	}

	.header {
		width: 100%;
		height: 478rpx;
		background-image: linear-gradient(to right, #FE7C67, #634FDF);
		background-repeat: no-repeat;
		background-size: 100%;
		padding-top: 80rpx;
		box-sizing: border-box;

		.infor {
			display: flex;
			align-items: center;
			margin-left: 24rpx;
			position: relative;
			z-index: 10;

			.img1 {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%
			}

			.text {
				margin-left: 16rpx;

				view {
					&:first-child {
						color: #fff;
						font-size: 36rpx;
					}
				}

				view {
					&:last-child {
						color: rgba(255, 255, 255, 0.6);
						font-size: 28rpx;
					}
				}
			}
		}

		.totalBox {
			display: flex;
			margin-top: 60rpx;
			position: relative;
			z-index: 10;

			.number {
				margin-left: 24rpx;
				margin-right: 36rpx;

				view {
					&:first-child {
						color: #fff;
						font-family: PingFang SC;
						font-size: 28rpx;
						font-weight: 500;
						text-align: center;
					}
				}

				view {
					&:last-child {
						font-family: PingFang SC;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.6)
					}
				}
			}

			.choose {
				width: 144rpx;
				height: 56rpx;
				border-radius: 32rpx;
				background-color: #E5725F;
				font-size: 28rpx;
				color: #fff;
				text-align: center;
				line-height: 56rpx;
				margin-left: 190rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
				}
			}

			.choose1 {
				width: 140rpx;
				height: 52rpx;
				border-radius: 32rpx;
				border: 1rpx solid #E5725F;
				font-size: 28rpx;
				color: #E5725F;
				text-align: center;
				line-height: 52rpx;
				margin-left: 190rpx;
				display: flex;
				justify-content: center;
				align-items: center;

			}
		}
	}

	.header1 {
		width: 100%;
		height: 478rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
	}

	.empty {
		width: 228rpx;
		margin: 0 auto;
		margin-top: 150rpx;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: 400;
		color: #6D6D6D;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		image {
			width: 228rpx;
			height: 268rpx;
			margin-bottom: 30rpx;
		}
	}

	.box {
		width: 730rpx;
		margin-left: -12rpx;
		padding: 24rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 24rpx;
		justify-content: space-between;
	}

	.modal {
		width: 356rpx;
		height: 238rpx;
		position: relative;
		top: -247rpx;
		left: 0;
		border-radius: 8rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border: 1rpx solid transparent;

		.boxImg {
			width: 48rpx;
			height: 48rpx;
			display: block;
			margin: 0 auto;
			margin-top: 28rpx;
		}

		.boxText {
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 500;
			color: #fff;
			text-align: center;
			margin-top: 20rpx;
		}

		.boxText1 {
			font-family: PingFang SC;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 0.6);
			text-align: center;
			margin-top: 5rpx;

		}
	}

	.box-item {
		width: 360rpx;
		height: 480rpx;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-bottom: 24rpx;
		background-color: #Fff;
		border-radius: 8rpx;
	}

	.box-img {
		width: 360rpx;
		height: 314rpx;
		border-radius: 8rpx 8rpx 0 0;
		margin-top: -20rpx;
	}

	.box-img1 {
		width: 360rpx;
		height: 240rpx;
		border-radius: 8rpx;
	}

	.box-text {
		height: 80rpx;
		width: 324rpx;
		margin: 0;
		margin: 0 auto;
		font-weight: 500;
		font-size: 28rpx;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.box-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16rpx;
		box-sizing: border-box;
		width: 330rpx;
	}

	.head {
		display: flex;
		align-items: center;
		color: #6D6D6D
	}

	.head-img {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
	}

	.head-name {
		font-size: 20rpx;
		margin-left: 16rpx;
	}

	.aixin {
		line-height: 30rpx;
		display: flex;
		align-items: center;
		color: #6D6D6D;
	}

	.aixin-text {
		font-size: 20rpx;
		margin-left: 16rpx;
	}


	::v-deep .u-tabs {
		height: 100rpx !important;
		background-color: #fff !important;
		border-radius: 30rpx 30rpx 0 0 !important;
		margin-top: 60rpx !important;
	}


	.border {
		border: 2rpx solid #6D6D6D;
	}

	.poput-box {
		width: 474rpx;
		min-height: 242rpx;
		background: #FFFFFF;
		box-shadow: 0 16rpx 40rpx 0 rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;

		.point-out {
			width: 160rpx;
			height: 56rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
</style>